{template "header.html"}
        <link rel="stylesheet" href="{HOME_THEME_PATH}mobile/css/join.css">
        <script type="text/javascript">
        var joinSwiper;
        var infoIScroll;
        var swiperChangeStatus = false;
        function page_onload(){
            //jpin swiper init
            pageiScroll.destroy();
            pageiScroll = null;

            joinSwiper = new Swiper('.join_swiper',{
                //loop: true,
                effect : 'flip',
                flip: {
                    slideShadows : true,
                    limitRotation : true,
                },
                onInit: function(swiper){
                    //bindInfoIScroll();
                    bindInfoIScroll();
                    bindChangeTab();
                },
                onTransitionStart: function(swiper){
                    if(swiperChangeStatus){
                        infoIScroll.destroy();
                        infoIScroll = null;
                    }else{
                        swiperChangeStatus = true;
                    }
                    bindInfoIScroll();
                    bindChangeTab();
                },
                onSliderMove: function(swiper, event){
                    infoIScroll.destroy();
                    infoIScroll = null;
                    bindInfoIScroll();
                }
            })
        }
        function bindInfoIScroll(){
            var classname = $('.swiper-slide-active').find('.tag_on').attr('name');
            $('#iScrollbox').find('p').attr('style','');
            $('#iScrollbox').attr('id','');
            $('.swiper-slide-active').find('.join_'+classname).attr('id','iScrollbox');
            infoIScroll = new IScroll('#iScrollbox',{bounce:false,click:iScrollClick()});
        }
        function bindChangeTab(){
            $('.join_option>span').unbind('click');
            $('.join_option>span').click(function(){
                $(this).parent().find('span').removeClass('tag_on');
                $(this).addClass('tag_on');
                var op = $(this).attr('name');
                var pagesBox = $(this).parent().parent().find('.join_info');
                pagesBox.find('div').hide();
                pagesBox.find('.join_'+op).show();

                infoIScroll.destroy();
                infoIScroll = null;
                bindInfoIScroll();
            });
        }

        </script>
            <div class='join_box'>
                <div class='join_swiper'>
                    <div class='swiper-wrapper'>
                    {list action=module catid=32}
                        <div class='swiper-slide'>
                            <div class='join_content'>
                                <div class='join_bg'><img src="{HOME_THEME_PATH}mobile/images/join/info_bg.jpg"/></div>
                                <div class='join_page'>
                                    <img src="{dr_get_file($t.mobile_image)}"/>
                                    <div class='join_option'>
                                        <span name='require' class='tag_on'>任职要求</span>
                                        <span name='duty'>工作职责</span>
                                    </div>
                                    <div class='clear'></div>
                                    <div class='join_info'>
                                        <div class='join_require' style="display: block;">
                                            <pre>{$t.require}</pre>
                                        </div>
                                        <div class='join_duty'>
                                            <pre>{$t.duty}</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {/list}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>